<template>
	<view class="content">
		<view class="view bar-info">
			<image class="info-image" src="" mode=""></image>
			<text class="info-title">炫光真机械手感键盘鼠标套装</text>
			<text class="info-money">砍到0元免费拿走！</text>
		</view>
		<view class="view user-info">
			<view class="user-info-left">
				<image class="user-icon" src="../../../static/lottery-info-icon-title.png" mode=""></image>
				<text>潘达抽奖</text>
			</view>
			<view class="user-info-right">
				<image class="user-info-add-icon" src="../../../static/add-friends.png" mode=""></image>
				<text>去了解</text>
			</view>
		</view>
		<view class="view bar-center">
			<view class="center-tab">
				<block v-for="(item, index) in bar_info_tab" :key="index">
					<view class="item-info" @click="changeBarTab(item.id)">
						<text :style="{color:bar_info_tab_id == item.id?'#E9564F':'#111111'}">{{item.name}}</text>
						<view class="item-bottom" v-if="item.id == bar_info_tab_id"></view>
					</view>
				</block>
			</view>
			<block v-if="bar_info_tab_id == 2">
				<rich-text class="rich-text1" nodes="<p>123</p>"></rich-text>
			</block>
			<block v-if="bar_info_tab_id == 1">
				<text v-if="false" class="success-barg">恭喜您！砍成了</text>
				<text class="success-barg">很遗憾！砍价失败</text>
				<view class="backtime-info" v-if="false">
					<ucountdown 
						:timestamp="86400" 
						:font-size="30" 
						separator-color="#111111" 
						bg-color="#7c7c7c"
						:show-days="false"
						color="#FFFFFF"
					></ucountdown>
					<text class="text1">后砍价结束</text>
				</view>
				<view class="progress-info">
					<view class="posi-money">
						<view class="info">
							<image class="bar-money" src="../../../static/bar-money.png" mode=""></image>
							<text style="z-index: 1;margin-bottom: 8rpx;">已砍96.59</text>
						</view>
					</view>
					<view class="line-center">
						<view class="item"></view>
					</view>
				</view>
				<block v-if="true">
					<text class="ready-bar-money">未在规定时间内完成，砍价已过期</text>
					<view class="center-bottom-btn" style="color: #E9564F;" @click="$refs.bargSuccess.open()">
						<text>免费拿其他商品</text>
					</view>
				</block>
				<block v-if="false">
					<text class="ready-bar-money">恭喜您砍成了，即将为您发货！</text>
					<view class="center-bottom-btn" style="background: #E9564F;color: #FFFFFF;">
						<text>领取商品</text>
					</view>
					<button class="center-bottom-btn" style="color: #E9564F;" type="default" open-type="share">
						<text>向朋友炫耀一下</text>
					</button>
				</block>
				<block v-if="false">
					<text class="ready-bar-money">已砍<text class="money-color">￥96.59</text>，还差<text class="money-color">￥12.41</text></text>
					<view class="center-bottom-btn" style="background: #E9564F;color: #FFFFFF;">
						<image class="video-icon" src="../../../static/video-icon.png" mode=""></image>
						<text>再砍一刀</text>
					</view>
					<button class="center-bottom-btn" style="color: #E9564F;" type="default" open-type="share">
						<text>人多力量大，喊朋友帮忙</text>
					</button>
					<text class="bottom-text">砍价秘籍：邀请新用户更容易砍成哦~</text>
				</block>
			</block>
		</view>
		<view class="view user-bar-rule">
			<view class="top">
				<text>砍价记录</text>
			</view>
			<view class="list" style="padding: 0 20upx 0 30upx;">
				<block v-for="(item, index) in 3" :key="index">
					<view class="item">
						<view class="left">
							<image src="" mode=""></image>
							<view class="user-name">
								<text class="text1">小姐姐</text>
								<text class="text2">小李飞刀，刀出必中！</text>
							</view>
						</view>
						<text class="right">砍掉￥15.98</text>
					</view>
				</block>
				
			</view>
			<view class="load-more">
				<text>查看更多</text>
				<image src="../../../static/showmoer.png" mode=""></image>
			</view>
		</view>
		<view class="view user-bar-rule">
			<view class="top" style="margin-bottom: 10rpx;">
				<text>更多好货</text>
			</view>
			<view class="list" style="padding: 0 30rpx 0 20rpx;">
				<block v-for="(item, index) in 3" :key="index">
					<view class="item-goods">
						<image src="" mode=""></image>
						<view class="goods-info">
							<text class="info-top">炫光真机械手感键盘鼠标套装</text>
							<view class="prize-line-index">
								<view class="line">
									<view class="ready-line"></view>
								</view>
								<text class="moeny-text">已砍66.9%</text>
							</view>
							<view class="bottom-goods">
								<text class="text1">532人已免费拿</text>
								<view class="goods-btn">
									<text>免费拿</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<uni-popup ref="bargPostSuccess" type="center" :maskClick="false">
			<view class="bar-public-popup">
				<image class="bg-image" src="../../../static/luttery-start-bgimg.png" mode="widthFix"></image>
				<image class="close-popup" @click="$refs.bargPostSuccess.close()" src="../../../static/popuplutteryAssistantClose.png" mode=""></image>
				<view class="popup-center">
					<text class="top-text">提交成功</text>
					<text class="top-text1">恭喜你获得特权可以快速收货</text>
					<text class="top-text1" v-if="false">请尽快领取您的商品</text>
					<view class="center-bottom" style="margin-top: 137rpx;">
						<image class="sucessFriend-image" src="../../../static/postSuccess.png" mode=""></image>
						<view class="close-btn" @click="closeSuccessPopup">
							<text>点击添加好友，快速收货 </text>
						</view>
						<view class="close-btn-wite" @click="$refs.bargPostSuccess.close()">
							<text>算了，我慢慢等</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="bargSuccess" type="center" :maskClick="false">
			<view class="bar-public-popup">
				<image class="bg-image" src="../../../static/luttery-start-bgimg.png" mode="widthFix"></image>
				<image class="close-popup" @click="$refs.bargSuccess.close()" src="../../../static/popuplutteryAssistantClose.png" mode=""></image>
				<view class="popup-center">
					<text class="top-text">恭喜您砍价成功！</text>
					<text class="top-text1">请尽快填写您的收货地址领取商品~</text>
					<text class="top-text1" v-if="false">请尽快领取您的商品</text>
					<view class="center-bottom" style="margin-top: 137rpx;">
						<image class="sucessFriend-image" src="../../../static/goods-image.png" mode=""></image>
						<text class="successFriend-text">恭喜获得“炫光真机械手感键盘鼠标套装”</text>
						<view class="close-btn" v-if="false" @click="closeSuccessPopup">
							<text>立即领取</text>
						</view>
						<view class="close-btn" v-if="true" @click="postGoods">
							<text>立即领取</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="inputAddress" type="center" :maskClick="false">
			<view class="bar-public-popup">
				<image class="bg-image" src="../../../static/luttery-start-bgimg.png" mode="widthFix"></image>
				<image class="close-popup" @click="$refs.inputAddress.close()" src="../../../static/popuplutteryAssistantClose.png" mode=""></image>
				<view class="popup-center">
					<text class="top-text">请填写收货地址</text>
					<text class="top-text2" @click="openReadyAddress">选择已有地址</text>
					<view class="center-bottom" style="margin-top: 137rpx;">
						<view class="input-item">
							<view class="item">
								<text>姓</text>
								<text>名：</text>
							</view>
							<input class="address-input" v-model="username" placeholder-style="color:#7c7c7c" placeholder="张三" type="text" />
						</view>
						<view class="input-item">
							<view class="item">
								<text>电</text>
								<text>话：</text>
							</view>
							<input class="address-input" v-model="mobile" placeholder-style="color:#7c7c7c" placeholder="150 0000 0000" type="text" />
						</view>
						<view class="input-item">
							<view class="item">
								<text>所在地区：</text>
							</view>
							 <picker @change="bindPickerChange" mode="region">
								<view class="uni-input">{{province}}{{city}}{{area}}</view>
							</picker>
						</view>
						<view class="input-item">
							<view class="item">
								<text>详细地址：</text>
							</view>
							<input class="address-input" v-model="address" placeholder-style="color:#7c7c7c" placeholder="朝阳大街58号" type="text" />
						</view>
						<view class="close-btn" @click="$refs.inputAddress.close()">
							<text>立即提交等待发货</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="readyAddress" type="center" :maskClick="false">
			<view class="bar-public-popup">
				<image class="bg-image" src="../../../static/luttery-start-bgimg.png" mode="widthFix"></image>
				<image class="close-popup" @click="$refs.readyAddress.close()" src="../../../static/popuplutteryAssistantClose.png" mode=""></image>
				<view class="popup-center">
					<text class="top-text">收货地址</text>
					<text class="top-text2">请选择您的收货地址</text>
					<view class="center-bottom" style="margin-top: 137rpx;">
						<scroll-view scroll-y="true" style="height: 430rpx;width: 100%;margin-bottom: 40rpx;">
							<block v-for="(item, index) in 3" :key="index">
								<view class="address-item">
									<view class="addressinfo">
										<view class="user-address" @click="selectAddress(item)">
											<text style="margin-bottom: 16rpx;">张三    15252462583</text>
											<text>河北省保定市竞秀区155号</text>
										</view>
										<image @click="changeAddressEdit(0)" src="../../../static/addressedit.png" mode=""></image>
									</view>
									<view class="bottom-changeaddress">
										<view class="left">
											<image src="../../../static/default-address.png" mode=""></image>
											<view v-if="false" class="default-image"></view>
											<text :style="{color:true?'#E9564F':'#111111'}" style="margin-left: 20rpx;">默认地址</text>
										</view>
										<view class="right">
											<text>置顶</text>
											<text v-if="false">取消置顶</text>
											<text class="text1">删除</text>
										</view>
									</view>
								</view>
							</block>
						</scroll-view>
						<view class="close-btn" @click="changeAddressEdit(1)">
							<text>新增收货地址</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="changeAddress" type="center" :maskClick="false">
			<view class="bar-public-popup">
				<image class="bg-image" src="../../../static/luttery-start-bgimg.png" mode="widthFix"></image>
				<image class="close-popup" @click="$refs.changeAddress.close()" src="../../../static/popuplutteryAssistantClose.png" mode=""></image>
				<view class="popup-center">
					<text class="top-text" v-if="is_add == 0">修改地址</text>
					<text class="top-text" v-else>新增收货地址</text>
					<text class="top-text1" >请正确填写您的收货地址</text>
					<view class="center-bottom" style="margin-top: 137rpx;">
						<view class="input-item">
							<view class="item">
								<text>姓</text>
								<text>名：</text>
							</view>
							<input class="address-input" v-model="username" placeholder-style="color:#7c7c7c" placeholder="张三" type="text" />
						</view>
						<view class="input-item">
							<view class="item">
								<text>电</text>
								<text>话：</text>
							</view>
							<input class="address-input" v-model="mobile" placeholder-style="color:#7c7c7c" placeholder="150 0000 0000" type="text" />
						</view>
						<view class="input-item">
							<view class="item">
								<text>所在地区：</text>
							</view>
							 <picker @change="bindPickerChange" mode="region">
								<view class="uni-input">{{province}}{{city}}{{area}}</view>
							</picker>
						</view>
						<view class="input-item">
							<view class="item">
								<text>详细地址：</text>
							</view>
							<input class="address-input" v-model="address" placeholder-style="color:#7c7c7c" placeholder="朝阳大街58号" type="text" />
						</view>
						<view v-if="is_add == 0" class="close-btn" @click="$refs.changeAddress.close()">
							<text>确认修改</text>
						</view>
						<view v-else class="close-btn" @click="$refs.changeAddress.close()">
							<text>确认保存</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import ucountdown from "@/uview-ui/components/u-count-down/u-count-down.vue"
	export default {
		components:{
			ucountdown
		},
		data() {
			return {
				is_add:0,
				username:'',
				mobile:'',
				address:'',
				province:'请选择地区',
				city:'',
				area:'',
				bargaining_id:'',
				bar_info_tab_id:1,
				bar_info_tab:[
					{
						id:1,
						name:"砍价详情"
					},
					{
						id:2,
						name:'图文介绍'
					}
				]
			};
		},
		onLoad(e) {
			this.bargaining_id = e.id
			console.log(this.bargaining_id)
		},
		onShow() {
			
		},
		methods:{
			postGoods(){
				this.$refs.bargSuccess.close()
				this.$refs.bargPostSuccess.open()
				
			},
			closeSuccessVPopup(){
				this.$refs.bargSuccess.close()
			},
			selectAddress(item){
				this.$refs.readyAddress.close()
				this.$refs.inputAddress.open()
			},
			changeAddressEdit(type){
				this.is_add = type
				this.$refs.changeAddress.open()
			},
			openReadyAddress(){
				this.$refs.inputAddress.close()
				this.$refs.readyAddress.open()
			},
			bindPickerChange(e){
				console.log(e)
				this.province = e.detail.value[0]
				this.city = e.detail.value[1]
				this.area = e.detail.value[2]
			},
			closeSuccessPopup(){
				this.$refs.bargSuccess.close()
				this.$refs.inputAddress.open()
			},
			changeBarTab(id){
				this.bar_info_tab_id = id
			}
		}
	}
</script>

<style lang="scss">
	.popup-center{
		display: flex;
		align-items: center;
		flex-direction: column;
		z-index: 1;
		width: 690upx;
		border-radius: 0 0 18upx 18upx;
		.top-text2{
			font-size: 30upx;
			color: #7c7c7c;
			text-decoration: underline;
			font-weight: 500;
		}
		.top-text{
			font-size: 36upx;
			font-weight: bold;
			color: #E9564F;
			margin-bottom: 30upx;
		}
		.top-text1{
			font-size: 30upx;
			color: #7c7c7c;
		}
		.center-bottom{
			display: flex;
			width: 100%;
			align-items: center;
			flex-direction: column;
			background-color: #FFFFFF;
			padding: 0 30upx 52upx 30upx;
			border-radius: 0 0 18upx 18upx;
			.address-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 630upx;
				padding: 0 0 20upx 0;
				border-radius: 20upx;
				background: #F5F5F5;
				margin-bottom: 30upx;
				.bottom-changeaddress{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					padding: 0 30upx 0 20upx;
					.right{
						display: flex;
						align-items: center;
						font-size: 28upx;
						font-weight: 400;
						color: #7c7c7c;
						.text1{
							margin-left: 21upx;
						}
					}
					.left{
						display: flex;
						align-items: center;
						font-size: 28upx;
						.default-image{
							width: 30upx;
							height: 30upx;
							border: 2upx solid #8D8D8D;
						}
						image{
							width: 38upx;
							height: 38upx;
						}
					}
				}
				.addressinfo{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30upx;
					border-bottom: 2upx solid #EBEBEB;
					margin-bottom: 20upx;
					.user-address{
						display: flex;
						flex-direction: column;
						font-size: 28upx;
						color: #111111;
						font-weight: 400;
					}
					image{
						width: 30upx;
						height: 30upx;
					}
				}
			}
			.input-item{
				display: flex;
				align-items: center;
				width: 630upx;
				border-radius: 8upx;
				height: 80upx;
				background: #F5F5F5;
				box-sizing: border-box;
				padding: 26upx;
				margin-bottom: 30upx;
				.address-input{
					width: 400upx;
				}
				.item{
					display: flex;
					align-items: center;
					justify-content:space-between;
					font-size: 30upx;
					color: #2f2f2f;
					font-weight: 500;
					width: 150upx;
				}
			}
			.close-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 410upx;
				height: 80upx;
				border-radius: 20upx;
				background: linear-gradient(-4deg, rgba(251, 98, 102, 0.99), rgba(255, 128, 132, 0.99));
				color: #FFFFFF;
				font-size: 34upx;
			}
			.close-btn-wite{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 410upx;
				height: 80upx;
				border-radius: 20upx;
				border: 2upx solid rgba(233, 86, 79, 0.5);
				margin-top: 30upx;
				color: #E9564F;
			}
			.successFriend-text{
				font-size: 30upx;
				color: #111111;
				display: flex;
				align-items: center;
				margin-bottom: 60upx;
				.money-success{
					color: #E9564F;
				}
			}
			.sucessFriend-image{
				width: 230upx;
				height: 230upx;
				margin-bottom: 39upx;
				border-radius: 10upx;
			}
			.rich-text{
				width: 600upx;
				color: #111111;
				line-height: 48upx;
				font-size: 28upx;
			}
		}
	}
	.bar-public-popup{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 690upx;
		box-sizing: border-box;
		padding-top: 38upx;
		position: relative;
		.bg-image{
			position: absolute;
			z-index: 0;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}
		.close-popup{
			position: absolute;
			top: 24upx;
			right: 24upx;
			width: 31upx;
			height: 31upx;
			z-index: 10;
		}
	}
	.user-bar-rule{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30upx;
		box-sizing: border-box;
		.item-goods{
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 20upx 0;
			.goods-info{
				display: flex;
				flex-direction: column;
				.bottom-goods{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30upx;
					.goods-btn{
						width: 150upx;
						height: 48upx;
						border-radius: 24upx;
						background: #E9564F;
						color: #FFFFFF;
						font-size: 30upx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.text1{
						font-size: 28upx;
						color: #AEAEAE;
					}
				}
				.prize-line-index{
					display: flex;
					align-items: center;
					color: #E9564F;
					font-size: 28upx;
					.line{
						display: flex;
						align-items: center;
						width: 253upx;
						height: 10upx;
						border-radius: 5upx;
						background: #FBDDDC;
						margin-right: 19upx;
						.ready-line{
							width: 50%;
							height: 10upx;
							border-radius: 5upx;
							background: #E9564F;
						}
					}
				}
				.info-top{
					font-size: 30upx;
					color: #111111;
					margin-bottom: 28upx;
				}
			}
			image{
				width: 200upx;
				height: 192upx;
				margin-right: 30upx;
				border-radius: 10upx;
			}
		}
		.load-more{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #E9564F;
			font-size: 28upx;
			image{
				width: 28upx;
				height: 16upx;
				margin-right: 10upx;
			}
		}
		.list{
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.item{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 30upx 0;
				.right{
					font-size: 30upx;
					color: #E9564F;
				}
				.left{
					display: flex;
					align-items: center;
					.user-name{
						display: flex;
						flex-direction: column;
						.text1{
							font-size: 30upx;
							color: #111111;
							margin-bottom: 20upx;
						}
						.text2{
							font-size: 28upx;
							color: #AEAEAE;
						}
					}
					image{
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
						margin-right: 21upx;
					}
				}
			}
		}
		.top{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			box-sizing: border-box;
			padding: 30upx 0;
			border-bottom: 2upx solid #EBEBEB;
			font-size: 34upx;
			color: #111111;
			font-weight: 500;
		}
	}
	.bar-center{
		display: flex;
		flex-direction: column;
		align-items: center;
		.bottom-text{
			font-size: 30upx;
			color: #AEAEAE;
			margin-bottom: 53upx;
		}
		.center-bottom-btn{
			width: 630upx;
			height: 80upx;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36upx;
			margin-bottom: 30upx;
			padding: 0;
			background-color: rgba(0,0,0,0);
			line-height: 1;
			border: 2upx solid #E9564F;
			&::after{
				background: none;
				border: none;
			}
			.video-icon{
				width: 41upx;
				height: 40upx;
				margin-right: 20upx;
			}
		}
		.ready-bar-money{
			color: #111111;
			font-size: 30upx;
			display: flex;
			align-items: center;
			margin-bottom: 50upx;
			.money-color{
				color: #E9564F;
			}
		}
		.progress-info{
			display: flex;
			flex-direction: column;
			width: 610upx;
			position: relative;
			margin-top: 22upx;
			margin-bottom: 30upx;
			.line-center{
				width: 610upx;
				height: 30upx;
				border-radius: 15upx;
				background: #FBDDDC;
				display: flex;
				align-items: center;
				.item{
					background: #E9564F;
					height: 30upx;
					border-radius: 15upx;
					width: 50%;
				}
			}
			.posi-money{
				width: 100%;
				position: relative;
				height: 58upx;
				.info{
					width: 139upx;
					height: 58upx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					font-size: 24upx;
					position: absolute;
					left: 38%;
					image{
						position: absolute;
						z-index: 0;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.backtime-info{
			display: flex;
			align-items: center;
			.text1{
				font-size: 30upx;
				color: #111111;
				margin-left: 20upx;
			}
		}
		.success-barg{
			font-size: 48upx;
			color: #E9564F;
			font-weight: bold;
		}
		.rich-text1{
			color: #111111;
			font-size: 28upx;
			line-height: 48upx;
			margin-bottom: 30upx;
		}
		.center-tab{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			box-sizing: border-box;
			padding: 30upx 0;
			border-bottom: 2upx solid #EBEBEB;
			margin-bottom: 40upx;
			.item-info{
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				font-size: 34upx;
				.item-bottom{
					width: 74upx;
					height: 4upx;
					background: #E9564F;
					position: absolute;
					bottom: -30upx;
				}
			}
		}
	}
	.user-info{
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30upx;
		.user-info-right{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24upx;
			color: #FFFFFF;
			width: 131upx;
			height: 40upx;
			border-radius: 4upx;
			background: #3786ED;
			.user-info-add-icon{
				width: 28upx;
				height: 24upx;
				margin-right: 10upx;
			}
		}
		.user-info-left{
			display: flex;
			align-items: center;
			color: #111111;
			font-size: 30upx;
			.user-icon{
				width: 34upx;
				height: 34upx;
				margin-right: 10upx;
			}
		}
	}
	.bar-info{
		display: flex;
		flex-direction: column;
		.info-money{
			color: #E9564F;
			font-size: 28upx;
			margin-bottom: 30upx;
			margin-left: 35upx;
		}
		.info-title{
			font-size: 30upx;
			color: #111111;
			margin-bottom: 27upx;
			margin-left: 35upx;
		}
		.info-image{
			width: 690upx;
			height: 300upx;
			border-radius: 20upx 20upx 0 0;
			margin-bottom: 30upx;
		}
	}
	.view{
		width: 690upx;
		border-radius: 20upx;
		background: #FFFFFF;
		margin-bottom: 30upx;
	}
	.content{
		width: 750upx;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F7F7F7;
		box-sizing: border-box;
		padding: 30upx;
	}
</style>
